<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	pageContext.setAttribute("pageTitle", "用户维护");
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet"
	href="${ctx }/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx }/static/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx }/static/css/main.css">
<style>
.tree li {
	list-style-type: none;
	cursor: pointer;
}

table tbody tr:nth-child(odd) {
	background: #F4F4F4;
}

table tbody td:nth-child(even) {
	color: #C00;
}
</style>
</head>

<body>
	<%@include file="/include/navbar-top.jsp"%>

	<div class="container-fluid">
		<div class="row">
			<%@include file="/include/navbar-left.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form class="form-inline" role="form" style="float: left;"
							action="${ctx }/admin/index.html">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input class="form-control has-success" type="text"
										name="condition" placeholder="请输入查询条件"
										value="${sessionScope.condition }">
								</div>
							</div>
							<button type="submit" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</form>
						<button type="button" id="deleteAllBtn" class="btn btn-danger"
							style="float: right; margin-left: 10px;">
							<i class=" glyphicon glyphicon-remove"></i> 删除
						</button>
						<button type="button" class="btn btn-primary"
							style="float: right;"
							onclick="location.href='${ctx}/admin/add.html'">
							<i class="glyphicon glyphicon-plus"></i> 新增
						</button>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr>
										<th width="30">id</th>
										<th width="30"><input type="checkbox" id="allChecked"></th>
										<th>账号</th>
										<th>名称</th>
										<th>邮箱地址</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${pageInfoOfAdminList.list }" var="admin">
										<tr>
											<td>${admin.id }</td>
											<td><input type="checkbox" class="checkItem"></td>
											<td>${admin.loginacct }</td>
											<td>${admin.username }</td>
											<td>${admin.email }</td>
											<td>
												<button type="button" class="btn btn-success btn-xs">
													<i class=" glyphicon glyphicon-check"></i>
												</button>
												<button type="button" class="btn btn-primary btn-xs"
													onclick="location.href='${ctx}/admin/edit.html?id=${admin.id }'">
													<i class=" glyphicon glyphicon-pencil"></i>
												</button>
												<button type="button" class="btn btn-danger btn-xs"
													onclick="deleteAdmin(${admin.id },'${admin.username }')">
													<i class=" glyphicon glyphicon-remove"></i>
												</button>
											</td>
										</tr>
									</c:forEach>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<ul class="pagination">
												<li><a
													href="${ctx }/admin/index.html?pn=1&condition=${sessionScope.condition}">首页</a></li>
												<c:if test="${pageInfoOfAdminList.hasPreviousPage }">
													<li><a
														href="${ctx }/admin/index.html?pn=${pageInfoOfAdminList.prePage }&condition=${sessionScope.condition}">上一页</a></li>
												</c:if>

												<c:forEach items="${pageInfoOfAdminList.navigatepageNums }"
													var="pageNum">
													<c:if test="${pageInfoOfAdminList.pageNum==pageNum }">
														<li class="active"><a
															href="${ctx }/admin/index.html?pn=${pageNum }&condition=${sessionScope.condition}">${pageNum }
																<span class="sr-only">(current)</span>
														</a></li>
													</c:if>
													<c:if test="${pageInfoOfAdminList.pageNum!=pageNum }">
														<li><a
															href="${ctx }/admin/index.html?pn=${pageNum }&condition=${sessionScope.condition}">${pageNum }</a></li>
													</c:if>
												</c:forEach>
												<c:if test="${pageInfoOfAdminList.hasNextPage }">
													<li><a
														href="${ctx }/admin/index.html?pn=${pageInfoOfAdminList.nextPage }&condition=${sessionScope.condition}">下一页</a></li>
												</c:if>
												<li><a
													href="${ctx }/admin/index.html?pn=${pageInfoOfAdminList.pages }&condition=${sessionScope.condition}">末页</a></li>
											</ul>
										</td>
									</tr>

								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%@include file="/include/common.jsp"%>
	<script type="text/javascript">
		/* 单个删除提示 */
		function deleteAdmin(id,name){
			layer.confirm("你确定删除"+name+"么？",  {icon: 3, title:'删除提示'}, 
				function(){
				    location.href="${ctx}/admin/delete.html?id="+id;
				}, 
				function(cindex){
				    layer.msg("已经取消删除");
				}
			);
		}
		
		/* 全选按钮功能实现 */
		$("#allChecked").click(function(){
			$(".checkItem").prop("checked",$(this).prop("checked"))
		});
		
		/* 按钮功能同步 */
		$(".checkItem").click(function(){
			$("#allChecked").prop("checked",$(".checkItem:checked").length==$(".checkItem").length)
			
		});
		
		/* 批量删除实现 */
		$("#deleteAllBtn").click(function(){
	/* 		var list = $(".checkItem:checked")
			if (list.length==0) {
				layer.alert("请选择账户");
			}else {
				var ids = "";
				$.each(list,function(){
					ids+=$(this).parent().parent().find("td:eq(0)").text()+",";
				});
				layer.confirm("确认删除【"+ids+"】这些人吗？",{icon:3,title:"删除提示"},
						function(){
							location.href="${ctx}/admin/batch/delete?ids="+ids;
						},
						function(){
							layer.msg("已取消删除");
						})
			}
			 */
					//1、获取到当前被选中的所有的id
					var checked = $(".checkItem:checked");
					if(checked.length==0){
						layer.alert("您还没有选择任何用户");
					}else{
						var ids = "";
						//jquery如何遍历元素
						$.each(checked,function(){
							//代表当前遍历的元素
							ids+=$(this).parent().parent().find("td:eq(0)").text()+",";
						});
						//js的字符串截取。
						console.log(ids);
						layer.confirm("确认删除【"+ids+"】这些人吗？",{icon:3,title:"删除提示"},
							function(){
								location.href="${ctx}/admin/batch/delete?ids="+ids;
							},
							function(){
								layer.msg("取消删除....")
							})
					}
		})
		
	</script>
</body>
</html>